<template>
  <div>
    <div>
      <!--    搜索框-->
<!--      <el-input v-model="search" class="input-with-select" placeholder="请输入内容" style="float: left;width: 20%"-->
<!--                @keyup.enter.native="searchClick">-->
<!--        <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>-->
<!--      </el-input>-->
      <el-select v-model="search" placeholder="宿舍" @change="searchClick">
        <el-option :label="d" :value="d" v-for="(d,index) in sName" :key="index"></el-option>
      </el-select>
      <el-button
        :disabled="debuilds.length === 0"
        icon="el-icon-delete"
        style="float:left;"
        type="danger"
        @click="alldeBuild">
        一键删除
      </el-button>
      <!--    数据表格-->
      <el-table
        v-loading="loading"
        :data="visits.records"
        border
        @selection-change="changeBox"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-spinner="el-icon-loading"
        element-loading-text="拼命加载中"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          align="center"
          label="Id"
          type="index">
        </el-table-column>
        <el-table-column
          align="center"
          label="学生姓名"
          prop="studentName">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover" >
              <el-descriptions  border :column="2" >
                <el-descriptions-item label="学号" >
                  {{scope.row.studentId}}
                </el-descriptions-item>
                <el-descriptions-item label="来访人姓名" >
                  <el-tag size="small" type="success"> {{scope.row.visitName}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="关系" >
                  {{scope.row.visitRelation}}
                </el-descriptions-item>
                <el-descriptions-item label="所在单位" >
                  <el-tag size="small">{{scope.row.visitUnit}}</el-tag>
                </el-descriptions-item>
              </el-descriptions>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{scope.row.studentName}}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="楼栋">
          <template slot-scope="scope">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.buildId }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="宿舍号"
          prop="dormitoryId"
        >
          <template slot-scope="scope">
            <div slot="reference" >
              <el-tag size="medium" type="success">{{ scope.row.dormitoryId ||暂无寝室 }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="来访时间"
          prop="visitTime"
       >
          <template slot-scope="scope">
            <div slot="reference" >
                <el-tag size="medium" type="success">{{ scope.row.visitTime }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="离开时间"
          prop="visitLeaveTime"
        >
          <template slot-scope="scope">
            <div slot="reference" >
              <el-tag size="medium" type="danger">{{ scope.row.visitLeaveTime }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--    分页-->
      <el-pagination
        :page-size="limit"
        :total="total"
        background
        hide-on-single-page
        layout="prev, pager, next"
        @prev-click="prevClick"
        @next-click="nextClick"
        @current-change="handleCurrentChange">
      </el-pagination>

      <!--      编辑页面-->
      <el-dialog
        :visible.sync="dialogVisible"
        width="550px"
        :title="title">
        <el-form :model="visit" label-width="120px" size="small" label-position="left">
          <el-form-item label="来访人姓名">
            <el-input v-model="visit.visitName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="学生学号">
            <el-select v-model="visit.studentId">
              <el-option :label="id" v-for="id in userIds" :value="id" :key="id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关系">
            <el-input v-model="visit.visitRelation" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="单位">
            <el-input v-model="visit.visitUnit" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="来访时间">
            <el-date-picker
              v-model="timeOne"
              format="yyyy 年 MM 月 dd 日"
              placeholder="选择日期"
              type="date"
              value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-time-picker
              v-model="timeTwo"
              :picker-options="{selectableRange: '08:00:00 - 22:00:00'}"
              value-format="HH:mm:ss">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="离访时间">
            <el-date-picker
              v-model="timeThree"
              format="yyyy 年 MM 月 dd 日"
              placeholder="选择日期"
              type="date"
              value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-time-picker
              v-model="timeFour"
              :picker-options="{selectableRange: '08:00:00 - 22:00:00'}"
              value-format="HH:mm:ss">
            </el-time-picker>
          </el-form-item>
          <el-form-item style="margin-left: 185px">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="editSubmit">{{ title }}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-button type="primary" @click="adDialog">添加来访记录</el-button>

      <!--      成功提示-->
      <el-dialog
        :visible.sync="res">
        <el-result icon="success" subTitle="请根据提示进行操作" title="成功提示">
          <template slot="extra">
            <el-button size="medium" type="primary" @click="res = false">返回</el-button>
          </template>
        </el-result>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import visit from '@/utils/visit'
import student from '@/utils/student'

export default {
  name: 'Visit',
  data () {
    return {
      sName: [],
      userIds: [],
      timeOne: '',
      timeTwo: '',
      timeThree: '',
      timeFour: '',
      title: '',
      addVisible: false,
      ids: [],
      debuilds: [],
      visits: {},
      search: '',
      loading: true,
      limit: 10,
      total: 0,
      visit: {
        visitId: '',
        studentId: '',
        studentName: '',
        buildId: '',
        dormitoryId: '',
        visitName: '',
        visitUnit: '',
        visitRelation: '',
        visitTime: '',
        visitLeaveTime: ''
      },
      dialogVisible: false,
      res: false
    }
  },
  methods: {
    handleEdit (index, row) {
      this.title = '修改'
      Object.assign(this.visit, row)
      var list = this.visit.visitTime.split(' ')
      var listTwo = this.visit.visitLeaveTime.split(' ')
      this.timeTwo = list[1]
      this.timeOne = list[0]
      this.timeThree = listTwo[0]
      this.timeFour = listTwo[1]
      this.dialogVisible = true
    },
    editSubmit () {
      this.visit.visitTime = this.timeOne + ' ' + this.timeTwo
      this.visit.visitLeaveTime = this.timeThree + ' ' + this.timeFour
      if (this.title === '添加') {
        visit.addVisit(this.visit).then(() => {
          this.dialogVisible = false
          this.res = true
          this.getVisit(this.visits.current, this.limit, this.search)
        })
      } else {
        visit.editVisit(this.visit).then(() => {
          this.dialogVisible = false
          this.res = true
          this.getVisit(this.visits.current, this.limit, this.search)
        })
      }
    },
    adDialog () {
      this.visit = {}
      this.title = '添加'
      this.timeTwo = ''
      this.timeOne = ''
      this.timeThree = ''
      this.timeFour = ''
      this.dialogVisible = true
    },
    alldeBuild () {
      this.ids = []
      this.debuilds.forEach(builde => {
        this.ids.push(builde.visitId)
      })
      visit.deleteAllVisit(this.ids).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getVisit(this.visits.current, this.limit, this.search)
      })
    },
    changeBox (val) {
      this.debuilds = val
    },
    searchClick () {
      this.getVisit(1, this.limit, this.search)
    },
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        visit.deleteVisit(row.visitId).then(res => {
          this.getVisit(this.visits.current, this.limit, this.search)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCurrentChange (page) {
      this.getVisit(page, this.limit, this.search)
    },
    prevClick () {
      this.getVisit(this.builds.current - 1, this.limit, this.search)
    },
    nextClick () {
      this.getVisit(this.builds.current + 1, this.limit, this.search)
    },
    getVisit (page, limit, search) {
      visit.getVisit(page, limit, search).then(res => {
        this.visits = res.data
        this.total = parseInt(this.visits.total)
        this.loading = false
        this.visits.records.forEach(s => this.sName.push(s.studentName))
        this.sName = this.sName.filter((item, index) => {
          return this.sName.indexOf(item) === index
        })
      })
    }
  },
  created () {
    this.getVisit(0, this.limit, this.search)
    student.getStudentAllIds().then(res => {
      this.userIds = res.data
    })
  }
}
</script>

<style scoped>

</style>
